<template>
  <div class="applyInventory">
    <tab active-color="#43A2FE" v-model="currentIndex">
      <tab-item v-for="(item, index) in list" :key="index" :selected="index===currentIndex">
        <span>{{item}}</span>
      </tab-item>
    </tab>

    <swiper ref="swiper" v-model="currentIndex" :show-dots="false" @on-index-change="">
      <swiper-item :key="123">
        <group ref="swiper_item" gutter="10px">
          <cell
            is-link
            title="好件申请"
            :border-intent="false"
            :arrow-direction="goodSpare ? 'up' : 'down'"
            @click.native="goodSpare = !goodSpare">
            <span slot="after-title" class="after-title">({{goodSpareList.length}})</span>
            <span slot="icon"><img style="height: 23px;margin-right: 10px"
                                   src="~assets/images5/icon-haojian@3x.png"/></span>
          </cell>
          <template v-if="goodSpare">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in goodSpareList">
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{numberComma(item.fillAmount)}}</p>
              <span>{{dateFormat(new Date(item.createdTime))}}
                <span >等待 {{getTrialsPersons(item)}} 审批</span>
              </span>
            </cell>
          </template>
          <cell
            title="坏件退回"
            is-link
            :border-intent="false"
            :arrow-direction="badSpare ? 'up' : 'down'"
            @click.native="badSpare = !badSpare">
            <span slot="after-title" class="after-title">({{badSpareList.length}})</span>
            <span slot="icon"><img style="height: 23px;margin-right: 10px"
                                   src="~assets/images5/icon-huaijian@3x.png"/></span>
          </cell>
          <template v-if="badSpare">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in badSpareList">
              <div slot="child" @click="gotoExpenseForm(item.id)"><i class="fa fa-edit" style="color:#43A2FE;font-size: 0.2rem"></i>
              </div>
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{numberComma(item.fillAmount)}}</p>
              <span>{{dateFormat(new Date(item.createdTime))}}</span>
            </cell>
          </template>
        </group>
      </swiper-item>
      <swiper-item :key="456">
        <group ref="swiper_item" gutter="10px">
          <cell
            title="好件申请"
            is-link
            :border-intent="false"
            :arrow-direction="goodSpareFinish ? 'up' : 'down'"
            @click.native="goodSpareFinish = !goodSpareFinish">
            <span slot="after-title" class="after-title">({{goodSpareFinishList.length}})</span>
            <span slot="icon"><img style="height: 23px;margin-right: 10px"
                                   src="~assets/images5/icon-haojian@3x.png"/></span>
          </cell>
          <template v-if="goodSpareFinish">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in goodSpareFinishList">
              <div slot="child" @click="gotoExpenseForm(item.id)"><i class="fa fa-edit" style="color:#43A2FE;font-size: 0.2rem"></i>
              </div>
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{numberComma(item.fillAmount)}}</p>
              <span>{{dateFormat(new Date(item.createdTime))}}</span>
            </cell>
          </template>

          <cell
            title="坏件退回"
            is-link
            :border-intent="false"
            :arrow-direction="badSpareFinish ? 'up' : 'down'"
            @click.native="badSpareFinish = !badSpareFinish">
            <span slot="after-title" class="after-title">({{badSpareFinishList.length}})</span>
            <span slot="icon"><img style="height: 23px;margin-right: 10px"
                                   src="~assets/images5/icon-huaijian@3x.png"/></span>
          </cell>
          <template v-if="badSpareFinish">
            <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in badSpareFinishList">
              <div slot="child" @click="gotoExpenseForm(item.id)"><i class="fa fa-edit" style="color:#43A2FE;font-size: 0.2rem"></i>
              </div>
              <p>{{item.workOrderCode}}</p>
              <p>¥ {{numberComma(item.fillAmount)}}</p>
              <span>{{dateFormat(new Date(item.createdTime))}}</span>
            </cell>
          </template>

        </group>
      </swiper-item>
    </swiper>

    <div class="fixed-box">
      <div class="addSpare-btn blue" @click="goAddSpare">好件申请</div>
      <div class="backSpare-btn red" @click="goBackSpare">坏件退回</div>
    </div>
  </div>
</template>

<script>
  import {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Group,
    Cell,
    CellBox,
    CellFormPreview,
    Badge,
    Confirm,
  } from 'vux'
  export default {
    name: "applyInventory",
    components: {
      Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox, CellFormPreview, Badge, Confirm
    },
    data() {
      return{
        list: ['已提交', '已批准'],
        currentIndex: 0,
        goodSpare: false,//审批
        goodSpareList: [],
        badSpare: false,//驳回
        badSpareList: [],
        goodSpareFinish: false,//同意
        goodSpareFinishList: [],
        badSpareFinish: false,// 已批准的坏件退回
        badSpareFinishList: [],
        notice: false,//提示框
      }
    },
    methods: {
      goAddSpare: function () {
        this.$router.push({path: '/inventory/addSpare'})
      },
      goBackSpare: function () {
        this.$router.push({path: '/inventory/backSpare'})
      }
    }
  }
</script>

<style lang="less">
  .applyInventory{
    .addSpare-btn {
      display: flex;
      align-items: flex-end;
      font-size: 0.12rem;
      width: 0.5rem;
      height: 0.7rem;
      position: fixed;
      z-index: 2;
      bottom: 0.3rem;
      left: 30%;
      background: url("~assets/images5/icon-tianjiabaoxiao@3x.png") no-repeat;
      background-size: 100%;
      transform: translateX(-50%);
    }
    .backSpare-btn{
      display: flex;
      align-items: flex-end;
      font-size: 0.12rem;
      width: 0.5rem;
      height: 0.7rem;
      position: fixed;
      z-index: 2;
      bottom: 0.3rem;
      right: 30%;
      background: url("~assets/images5/icon-tuihuih@3x.png") no-repeat;
      background-size: 100%;
      transform: translateX(50%);
    }
  }
</style>
